<template>
	<view class="page-content">
		<view style="padding: 0 32rpx;height: 100%;overflow-y: auto">

			<view class="notice-box">
				<u-notice-bar mode="horizontal" :list="list" color="#000000" bg-color="rgba(255,214,0,0.25)" border-radius="4"
					:volume-icon="false" font-size="20"></u-notice-bar>
			</view>
			<form-item-title text="宠物信息">
				<template v-slot:right>
					<view class="addpet" @click="addPet">
						新增<image style="width: 40rpx;height: 40rpx;" src="/static/index/add.png" mode=""></image>
					</view>
				</template>
			</form-item-title>
			<view class="content-box" v-for="(item,index) in petsdata" :key="index">
				<view class="form-box">
					<u-form :label-style="labelStyle">
						<u-form-item :label="`宠物${index+1}`"></u-form-item>
						<!-- <u-upload :action="action" :file-list="fileList" height="136" width="136" max-count="3"
							upload-text=""></u-upload> -->
						<view style="display: flex;justify-content: space-around;">
							<u-upload width="136" height="136" :header="header" :action="action" max-count="1" upload-text="正面"
								@on-success="(data, oindex, fileList) => successZM(data, oindex, fileList, index)"
								@on-remove="(oindex, fileList) => removeZM(oindex, fileList, index)"></u-upload>
							<u-upload width="136" height="136" :header="header" :action="action" max-count="1" upload-text="左侧"
								@on-success="(data, oindex, fileList) => successZC(data, oindex, fileList, index)"
								@on-remove="(oindex, fileList) => removeZC(oindex, fileList, index)"></u-upload>
							<u-upload width="136" height="136" :header="header" :action="action" max-count="1" upload-text="右侧"
								@on-success="(data, oindex, fileList) => successYC(data, oindex, fileList, index)"
								@on-remove="(oindex, fileList) => removeYC(oindex, fileList, index)"></u-upload>
						</view>
						<u-form-item label="宠物照片"><u-input input-align="right" disabled="true" placeholder="请上传" /></u-form-item>
						<u-form-item label="宠物名"><u-input input-align="right" v-model="petsdata[index].name" /></u-form-item>
						<u-form-item label="年龄"><u-input type="number" input-align="right" disabled @click="changeAge(index)"
								v-model="petsdata[index].age" placeholder="请选择" /></u-form-item>
						<u-form-item label="品种"><u-input input-align="right" v-model="petsdata[index].breed" /></u-form-item>
						<u-form-item label="体重(kg)"><u-input type="number" input-align="right"
								v-model="petsdata[index].weight" /></u-form-item>
						<u-form-item label="疫苗接种信息"><u-switch slot="right" active-color="#FCD610"
								v-model="petsdata[index].ifVaccination"></u-switch></u-form-item>
					</u-form>
				</view>
			</view>
			<form-item-title text="宠主信息"></form-item-title>
			<view class="content-box">
				<view class="form-box">
					<u-form-item label="联系人" :label-style="labelStyle"><u-input input-align="right"
							v-model="formdata.contacts" /></u-form-item>
					<u-form-item label="联系方式" :label-style="labelStyle"><u-input input-align="right"
							v-model="formdata.contactInfo" /></u-form-item>
					<u-form-item label="人数" :label-style="labelStyle"><u-input type="number" input-align="right"
							v-model="formdata.num" /></u-form-item>
				</view>
			</view>
			<view class="content-box">
				<view class="form-box">
					<u-form-item label="备注" :label-style="labelStyle" label-position="top">
						<u-input type="textarea" v-model="formdata.remark" />
					</u-form-item>
				</view>
			</view>
		</view>
		<view class="bottom-box">
			<view class="form-box">
				<view class="flex-row justify-between items-center group_16">
					<view class="publish-btn" @click="handleSubmit">
						申请加入
					</view>
				</view>
			</view>
		</view>
		<u-select v-model="selectageshow" mode="mutil-column" :list="agelist" @confirm="ageconfirm"></u-select>
	</view>
</template>

<script>
	import formItemTitle from "components/index/form-item-title.vue";
	import petParty from "../../../api/petParty.js";
	export default {
		data() {
			return {
				list: [
					'温馨提示：感谢您使用宠行宝•宠物巴士服务，平台提供信息共享服务，请您保护好自己的财产安全，期间的财物及人身安全责任需自行承担。'
				],
				action: this.$config.mobeilURL + '/common/uploadFile', // 演示地址
				labelStyle: {
					fontWeight: "bold",
					fontSize: "28rpx",
					whiteSpace: "nowrap"
				},
				petsdata: [{
					age: "",
					breed: "",
					frontalView: "",
					ifVaccination: "",
					leftSideView: "",
					name: "",
					rightSideView: "",
					weight: "",
				}],
				formdata: {
					certificateIds: "",
					contactInfo: "",
					contacts: "",
					// lat: 0,
					// lng: 0,
					num: 0,
					partyId: 0,
					petNum: 0,
					pets: [],
					remark: "",
				},
				header: {
					"content-type": "multipart/form-data",
					"Authorization": uni.getStorageSync('cxbtoken')
				},
				currentIndex: -1,
				selectageshow: false,
				agelist: [
					[],
					[{
						value: '年',
						label: '年'
					}],
					[],
					[{
						value: '月',
						label: '月'
					}],
				]
			}
		},
		onLoad(option) {
			this.formdata.partyId = option.id;
			for (let i = 0; i <= 100; i++) {
				this.agelist[0].push({
					value: i,
					label: i
				})
			}
			for (let i = 0; i < 12; i++) {
				this.agelist[2].push({
					value: i,
					label: i
				})
			}
		},
		methods: {
			addPet() {
				this.petsdata.push({
					age: "",
					breed: "",
					colour: "",
					frontalView: "",
					ifVaccination: "",
					leftSideView: "",
					name: "",
					remark: "",
					rightSideView: "",
					sex: "",
					weight: "",
				})
			},
			successZM(data, index, lists, cIndex) {
				if (data.code !== 200) {
					lists[index].error = true;
				} else {
					this.petsdata[cIndex].frontalView = data.accessPath;
				}
			},
			removeZM(index, lists, cIndex) {
				this.petsdata[cIndex].frontalView = '';
			},
			successZC(data, index, lists, cIndex) {
				if (data.code !== 200) {
					lists[index].error = true;
				} else {
					this.petsdata[cIndex].leftSideView = data.accessPath;
				}
			},
			removeZC(index, lists, cIndex) {
				this.petsdata[cIndex].leftSideView = "";
			},
			successYC(data, index, lists, cIndex) {
				if (data.code !== 200) {
					lists[index].error = true;
				} else {
					this.petsdata[cIndex].rightSideView = data.accessPath;
				}
			},
			removeYC(index, lists, cIndex) {
				this.petsdata[cIndex].rightSideView = "";
			},
			handleSubmit() {
				// this.formdata.lng = `${this.formdata.lng}`;
				// this.formdata.lat = `${this.formdata.lat}`;
				this.formdata.pets = this.petsdata;
				this.formdata.petNum = this.petsdata.length;
				uni.showLoading({
					title: '发布中'
				})
				petParty
					.addPetPartyApply(this.formdata)
					.then((res) => {
						uni.hideLoading();
						if (res.code === 200) {
							uni.showToast({
								title: '发布成功',
								icon: "none"
							})
							setTimeout(() => uni.navigateBack({
								delta: 2
							}), 1000)
						} else {
							throw Error();
						}
					})
					.catch((err) => {
						uni.hideLoading();
						uni.showToast({
							title: '发布失败',
							icon: "error"
						})
					});
			},
			changeAge(index) {
				this.currentIndex = index;
				this.selectageshow = true;
			},
			ageconfirm(e) {
				let strage = '';
				if (e[0].value != 0)
					strage = strage + e[0].value + e[1].value
				if (e[2].value != 0)
					strage = strage + e[2].value + '个' + e[3].value
				this.petsdata[this.currentIndex].age = strage
			}
		},
		components: {
			formItemTitle
		}
	}
</script>

<style lang="scss" scoped>
	.page-content {
		height: 100%;
		background-color: #F6F6F6;
		overflow-y: auto;

		.content-box {
			width: 100%;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			.notice-box {
				padding: 24rpx;
			}

			.form-box {
				padding: 0 32rpx;
				margin-bottom: 40rpx;

				.font_3 {
					font-size: 28rpx;
					font-family: PingFang SC;
					line-height: 25.76rpx;
					font-weight: 700;
					color: #000000;
				}
			}

			.group_5 {
				padding: 40rpx 0;
				border-bottom: solid 2rpx #f3f3f3;

				.font_2 {
					font-size: 28rpx;
					font-family: PingFang SC;
					line-height: 26.18rpx;
					font-weight: 700;
					color: #000000;
				}

				.text_3 {
					line-height: 25.7rpx;
				}

				.font_4 {
					font-size: 28rpx;
					font-family: PingFang SC;
					line-height: 20.78rpx;
					font-weight: normal;
					color: #999999;
				}
			}
		}

		.bottom-box {
			padding: 16rpx 0;
			background: #FFFFFF;
			box-shadow: 0rpx -8rpx 30rpx 0rpx rgba(0, 0, 0, 0.05);
			border-radius: 24rpx 24rpx 0rpx 0rpx;

			.mt-7 {
				margin-top: 14rpx;
			}

			.group_16 {
				padding-left: 36rpx;
				padding-right: 28rpx;

				.publish-btn {
					width: 100%;
					padding: 40rpx 0;
					background-color: #fbd610;
					border-radius: 68rpx;
					font-size: 32rpx;
					text-align: center;
					font-weight: 700;
					margin-bottom: 24rpx;
				}
			}
		}

		.addpet {
			display: flex;
			align-items: center;
		}
	}
</style>